<template>
  <div class="file">
    <el-upload
        class="upload-demo"
        drag
        action=""
        multiple
        ref="upload"
        :file-list="fileList"
        :on-change="change"
        :auto-upload="false"
        accept=".docx,.doc,.pdf"
        :headers="headers"
        :http-request="submitUpload"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <div>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submit">确定上传</el-button>
    </div>
    <el-dialog title="填写文件所属科目信息" v-model="dialogFormVisible">
      <el-form>
        <el-form-item>
          <el-select v-model="region" placeholder="请选择科目">
            <el-option label="数学一" value="5"></el-option>
            <el-option label="数学二" value="6"></el-option>
            <el-option label="数学三" value="7"></el-option>
            <el-option label="英语一" value="8"></el-option>
            <el-option label="英语二" value="9"></el-option>
            <el-option label="政治" value="14"></el-option>
            <el-option label="计算机408" value="10"></el-option>
            <el-option label="法学" value="11"></el-option>
            <el-option label="教育学" value="12"></el-option>
            <el-option label="传媒" value="13"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { useCookies } from '@vueuse/integrations/useCookies';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { ElUpload, ElButton, ElDialog, ElForm, ElFormItem, ElSelect, ElOption } from 'element-plus';
import { useStore } from 'vuex';
const router = useRouter();
const store = useStore();
const { get } = useCookies(['uid']);
const { appContext } = getCurrentInstance();
const $message = appContext.config.globalProperties.$message = ElMessage;

const dialogFormVisible = ref(false);
const region = ref('');
const fileList = ref([]);
const userId = ref(get('uid'));
const headers = ref({
  'Content-Type': 'multipart/form-data'
});
const second ='second';
const goback = 'PersonalCenter';

const change = (file, fileList) => {
  dialogFormVisible.value = true;
};

const sure = () => {
  dialogFormVisible.value = false;
};

const submitUpload = (options) => {
  const file = options.file;  // Access the file from options
  let fd = new FormData();
  fd.append('file', file.raw);  // Ensure to use file.raw for the actual file object
  fd.append('sid', region.value);
  fd.append('uid', userId.value);

  return axios.post('/ky/user/upload', fd, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  })
      .then((result) => {
        if (result.data.code === 200) {
          $message.success("上传成功！");
          router.push('/personal');
          store.commit("showif", second);
        }
      })
      .catch(error => {
        console.error('上传文件出错:', error);
        $message.error('上传文件出错，请检查网络或重试');
        // Handle error appropriately (throw it to fit the promise structure)
        throw error;
      });
};

const submit = () => {
  const upload = getCurrentInstance().refs.upload;
  if (upload) {
    upload.submit();
  }
};
</script>

<style scoped>
.file {
  width: 100%;
  height: 500px;
}
.el-upload-dragger {
  width: 800px !important;
  margin-left: 100px;
}
</style>